<template>
    <div style="width: 100%; height: 70vh;">
        <!-- 新增角色按钮 -->
        <div>
            <el-button type="success" size="small" plain @click="addParentItem">新增角色</el-button>
        </div>
        <!-- 角色表格区域 -->
        <el-table
            :data="tableData"
            row-key="id"
            :row-class-name="getRowClassName"
            :default-expand-all="false"
            style="width: 100%"
        >
            <!-- 展开行，显示子项（用户） -->
            <el-table-column type="expand">
                <template #default="props">
                    <el-table :data="props.row.children" style="width: 100%" :show-header="false">
                        <el-table-column prop="name" label="子项名称"></el-table-column>
                        <el-table-column label="操作" width="100">
                            <template #default="scope">
                                <!-- 移除用户按钮 -->
                                <el-button type="danger" size="small"
                                    @click="deleteChildItem(props.row, scope.row)">移除用户</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <!-- 角色名称 -->
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <!-- 角色描述 -->
            <el-table-column prop="description" label="角色描述"></el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <!-- 赋予用户按钮 -->
                    <el-button type="primary" size="small" @click="addChildItem(scope.row)">赋予用户</el-button>
                    <!-- 删除角色按钮 -->
                    <el-button type="danger" size="small" @click="deleteParentItem(scope.row)">删除角色</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增角色对话框 -->
        <el-dialog v-model="isShowAddRole" title="新增角色" width="500" align-center>
            <el-input v-model="roleName" placeholder="请输入角色名称" />
            <!-- 权限全选与多选 -->
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
                全选
            </el-checkbox>
            <el-checkbox-group v-model="checkedPermissions" @change="handleCheckedPermissionsChange">
                <el-checkbox v-for="permission in permissionData" :key="permission.key" :value="permission.key">
                    {{ permission.label }}
                </el-checkbox>
            </el-checkbox-group>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowAddRole = false">取消</el-button>
                    <el-button type="primary" @click="yesAddRole">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 赋予用户对话框 -->
        <el-dialog v-model="isShowGiveRole" title="赋予用户" width="500" align-center>
            <el-select v-model="value" clearable placeholder="请选择需要赋予角色的用户">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                <template #empty>
                    暂无用户数据
                </template>
            </el-select>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowGiveRole = false">取消</el-button>
                    <el-button type="primary" @click="yesGiveRole">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 删除角色对话框 -->
        <el-dialog v-model="isShowDelteRole" title="删除角色" width="500" align-center>
            <span>确定要删除该角色吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowDelteRole = false">取消</el-button>
                    <el-button type="danger" @click="yesDeleteRole">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 移除用户对话框 -->
        <el-dialog v-model="isShowDelteUser" title="移除用户" width="500" align-center>
            <span>确定要从该角色中移除该用户吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowDelteUser = false">取消</el-button>
                    <el-button type="danger" @click="yesDeleteUser">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
// 引入依赖
import { ref, watch, onMounted } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElMessage, ElDialog, ElSelect, ElOption, ElInput, ElCheckbox, ElCheckboxGroup } from 'element-plus'

// 角色表格数据，每个角色可包含子项（用户）
const tableData = ref([
    {
        id: 1,
        name: '内容管理员',
        description: '可以对内容进行查看和编辑',
        children: [
            { id: 1, name: 'John Doe', userId: 3 },
            { id: 2, name: 'David', userId: 7 }
        ]
    }
])

onMounted(() => {
    // 这里可以请求后端获取角色和用户数据
})

// 赋予用户选择框
const value = ref('')
const options = ref([]) // 用户选项

// 权限多选框数据
const permissionData = ref([
    { key: 'dashboard:view', label: '查看仪表盘' },
    { key: 'user:view', label: '查看用户列表' },
    { key: 'user:edit', label: '编辑用户资料' },
    { key: 'role:view', label: '查看角色列表' },
    { key: 'content:view', label: '查看内容列表' },
    { key: 'content:edit', label: '编辑内容' },
    { key: 'data:view', label: '查看数据列表' },
    { key: 'data:detail', label: '查看数据详情' },
    { key: 'system:settings', label: '查看系统设置' },
    { key: 'system:logs', label: '查看系统日志' },
])

// 新增角色名称
const roleName = ref('')

// 当前选中的权限
const checkedPermissions = ref([])

// 全选状态
const checkAll = ref(false)

// 是否半选状态
const isIndeterminate = ref(false)

// 处理全选状态变化
const handleCheckAllChange = (val) => {
    checkedPermissions.value = val ? permissionData.value.map(item => item.key) : []
    isIndeterminate.value = false
}

// 处理权限选择变化
const handleCheckedPermissionsChange = (value) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === permissionData.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < permissionData.value.length
}

// 监听权限选择变化，自动更新全选和半选状态
watch(checkedPermissions, (newValue) => {
    const checkedCount = newValue.length
    checkAll.value = checkedCount === permissionData.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < permissionData.value.length
})

// 对话框显示控制
let isShowGiveRole = ref(false)
let isShowDelteUser = ref(false)
let isShowDelteRole = ref(false)
let isShowAddRole = ref(false)

// 当前操作的父项和子项
let currentParentItem = ref(null)
let currentChildItem = ref(null)

// 设置表格行的类名（父项高亮）
const getRowClassName = ({ row }) => {
    if (row.children) {
        return 'parent-row'
    }
    return ''
}

// 添加角色
const addParentItem = () => {
    isShowAddRole.value = true
}

// 确认添加角色
const yesAddRole = () => {
    // 这里可以提交新增角色请求
    isShowAddRole.value = false
}

// 添加子项（赋予用户）
const addChildItem = parentItem => {
    currentParentItem.value = parentItem
    isShowGiveRole.value = true
}

// 确认赋予用户
const yesGiveRole = () => {
    const parentItem = currentParentItem.value
    // 这里可以提交赋予用户请求
    ElMessage.success('角色赋予成功')
    isShowGiveRole.value = false
    currentParentItem.value = null
}

// 删除角色
const deleteParentItem = (parentItem, childItem) => {
    currentParentItem.value = parentItem
    isShowDelteRole.value = true
}

// 确认删除角色
const yesDeleteRole = () => {
    const parentItem = currentParentItem.value
    // 这里可以提交删除角色请求
    ElMessage.success('角色删除成功')
    isShowDelteRole.value = false
    currentParentItem.value = null
}

// 删除子项（移除用户）
const deleteChildItem = (parentItem, childItem) => {
    currentParentItem.value = parentItem
    currentChildItem.value = childItem
    isShowDelteUser.value = true
}

// 确认移除用户
const yesDeleteUser = () => {
    const parentItem = currentParentItem.value
    const childItem = currentChildItem.value
    // 这里可以提交移除用户请求
    ElMessage.success('用户移除成功')
    isShowDelteUser.value = false
    currentParentItem.value = null
    currentChildItem.value = null
}
</script>

<style>
/* 父行高亮样式 */
.el-table .parent-row {
    background-color: #f0f9eb;
}
</style>